<template>
  <div class="box">
    <div class="header">
      <h2>数据可视化</h2>
    </div>
    <div class="footer">
      <div class="footer1">
        <div class="conten1"></div>
        <div class="conten1"></div>
        <div class="conten1"></div>
      </div>
      <div></div>
      <div class="footer1">
        <div class="conten1 conten2"></div>
        <div class="conten1 conten2"></div>
        <div class="conten1 conten2"></div>
      </div>

    </div>
  </div>
</template>

<script >
export default {
  
}
</script>



<style scoped >

.box {
  width: 100vw;
  height: 100vh;
  background: url("../assets/u=906940256,1767963204&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto.webp");
  background-size: cover;
}

.header {
    height: 19vh;
    width: 100vw;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    text-align: center;
    color: azure;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.footer {
  height: 80vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer>div{
  width: 32%;
  margin: 0px 10px;
}

.conten1{
  width: 80%;
  height: 30%;
  border: 1px solid #ccc;
  margin: 10px auto;  
}
.footer1{
  display: flex;
  flex-direction: column;
}
</style>